<template>
	<div class="zixuntoutiao">
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title">好房头条</h1>
		</header>
		<div class="mui-content">
			<div class="">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p style="color: #333;font-weight: bold;font-size: 16px;" >{{articleDetail.title}}</p>
						<p><img src="static/images/fav.png" alt="" style="width: 18px;display: inline-block;vertical-align: baseline;margin-right: 5px!important;margin-bottom: 0!important;"/>好房排行 <span style="float: right;">{{articleDetail.time}}</span></p>
					</div>
				</div>
				<!--<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<img :src="articleDetail.img" alt=""/>
					</div>
				</div>-->
				<div class="mui-card-content cl1">
					<div class="mui-card-content-inner" v-html="articleDetail.content">
						{{articleDetail.content}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			return {
				articleDetail:{}
			}
		},
		mounted: function() {
	      let ajaxURL=localStorage.getItem('ajaxURL');
	      let city=localStorage.getItem('city');
	      let id=this.$route.query.id;
	      let that=this;
	      $.ajax({
	        url:`${ajaxURL}/houseweb/H5/houseArticleById.do`,
	        type:'get',
	        cache:false,
	        data:{
	          city:city,
	          informationId:id
	        },
	        success:function(res){
	        	var data = JSON.parse(res)
	          that.articleDetail=data.data.information[0];
	          console.log(that.articleDetail)
	        }
	      });
	      
	    },
		methods:{
			back() {
				this.$router.go(-1); //返回上一层
			},
		}
	}
</script>
<style scoped>
	.zixuntoutiao {
		margin-bottom: 50px;
	}
	.mui-content {
		background-color: #fff;
	}

	.mui-card-content-inner {
		padding: 0 15px;
	}
	.mui-card-content-inner >>> p {
		font-size: 14px;
	}
	.mui-card-content-inner >>> img {
		max-width: 100%!important;
		margin: 0!important;
		margin-bottom: 10px!important;
	}
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}

	.mui-bar-nav a {
		color: #fff;
	}

	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}

	.mui-bar .mui-title {
		line-height: 50px;
		color: #fff;
	}

	.mui-segmented-control .mui-control-item {
		color: #fff;
		border-color: #fff;
	}

	.mui-segmented-control {
		border-color: #fff;
		width: 60%;
		margin: 0 20%;
	}

	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #000000;
	}

	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}

	.contain {
		margin-top: 60px;
	}

	.mui-table-view .mui-media-object {
		line-height: 90px;
		max-width: 140px;
		height: 90px;
	}

	.contain p img {
		width: 14px;
	}

	.mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #929292;
	}

	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mui-bar-nav~.mui-content {
		padding-top: 60px;
	}
</style>
